<template>
	<view class="page">
		<image class="logo" src="/static/logo-img/图层 3.png"></image>
		<view class="container">
			<u-form borderBottom="false" :model="userInfo" :rules="rules">
				<u-form-item labelPosition="left" prop="userInfo.username" :borderBottom="false" v-if="switchText">
					<view class="input-border">
						<image class="ioc-img" src="/static/logo-img/图层 4.png"></image>
						<input class="ioc-input" v-model="userInfo.username" placeholder="请输入账号" />
					</view>
				</u-form-item>
				<u-form-item class="aaa" labelPosition="left" prop="userInfo.phonenumber" :borderBottom="false" v-else>
					<view class="input-border">
						<image class="ioc-img" src="/static/logo-img/图层 4.png"></image>
						<input class="ioc-input" maxlength="11" v-model="userInfo.phonenumber" placeholder="请输入手机号" />
					</view>
				</u-form-item>
				<u-form-item labelPosition="left" prop="userInfo.password" :borderBottom="false">
					<view class="input-border">
						<image class="ioc-img" src="/static/logo-img/图层 5.png"></image>
						<input class="ioc-input" password v-model="userInfo.password" placeholder="请输入密码" />
					</view>
				</u-form-item>
				<u-form-item prop="userInfo.code" :borderBottom="false">
					<view class="input-code">
						<image class="ioc-img" src="/static/logo-img/图层 6.png"></image>
						<input class="ioc-input" type="number" v-model="userInfo.code" placeholder="请输入验证码" />
						<!-- <u--input :customStyle="loginIpt" placeholder="请输入验证码" border="surround" shape="circle"
							v-model="userInfo.code"></u--input> -->
						<div class="login-code">
							<img :src="codeUrl" @click="getCode" class="login-code-img" />
						</div>
					</view>
				</u-form-item>
				<button plain="true" class="btn" shape="circle" @click="handleLogin">
					登录
				</button>
				<div class="switch-div">
					<span class="switch-text" @click="handleSwitch">{{ switchText ? '手机号登录' : '账号登录' }}</span>
				</div>
			</u-form>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		login,
		getCodeImg,
		homeSumQuery,
		getInfo
	} from '@/common/yftx-api.js';
	import store from '@/store';
	export default {
		data() {
			return {
				openId: null,
				sessionKey: null,
				userInfo: {
					username: '',
					password: '',
					phonenumber: '',
					code: '',
					uuid: '',
				},
				rules: [],
				codeUrl: '',
				loginIpt: {
					width: '40%',
					display: 'inline-block',
					float: 'left',
					height: '100%',
				},
				switchText: true,
			};
		},
		onShow() {
			this.getCode();
		},
		methods: {
			getCode() {
				getCodeImg().then((res) => {
					if (res && res.code === 200) {
						this.codeUrl = `data:image/gif;base64,${res.img}`;
						this.userInfo.uuid = res.uuid;
					} else {
						this.$refs.uToast.show({
							message: res.msg,
							duration: 2000,
						});
					}
				});
			},
			handleSwitch() {
				this.switchText = !this.switchText;
				Object.keys(this.userInfo).forEach((key) => {
					this.userInfo[key] = '';
				});
				this.getCode();
			},
			handleLogin() {
				login(this.userInfo).then((res) => {
					if (res && res.code === 200) {
						uni.setStorageSync('Authorization', res.token);
						getInfo(res.token).then((info) => {
							store.commit('SET_USERlEVEL', info.user.userLevel);
							store.commit('SET_ENTERPRISEID', info.user.enterpriseId);
							store.commit('SET_USERINFO', info.user);
							uni.setStorageSync('username', info.user.userName);
							uni.setStorageSync('phone', info.user.phonenumber);
							uni.setStorageSync('userLevel', info.user.userLevel);
							uni.setStorageSync('userInfo', JSON.stringify(info.user));
						});
						uni.showToast({
							title: '登录成功',
							success: () => {
								setTimeout(() => {
									uni.switchTab({
										url: '/pages/index/index',
									});
								}, 500);
							},
						});
					} else {
						this.$refs.uToast.show({
							message: res.msg,
							duration: 2000,
						});
						this.getCode();
					}
				});
			},
		},
	};
</script>

<style scoped>
	.input-code {
		width: 63%;
		height: 70rpx;
		position: relative;
		border: 1px solid #F42450;
		border-radius: 45rpx;
	}

	.ioc-input {
		font-size: 28rpx;
		position: absolute;
		left: 80rpx;
		width: 100%;
		height: 70rpx;
		line-height: 70rpx;
	}

	.input-border {
		width: 100%;
		height: 70rpx;
		position: relative;
		border: 1px solid #F42450;
		border-radius: 45rpx;
	}

	.ioc-img {
		width: 28rpx;
		height: 30rpx;
		position: absolute;
		top: 22rpx;
		left: 28rpx;
		z-index: 99;
	}

	.page {
		height: 100vh;
	}

	.logo {
		display: block;
		width: 100%;
		height: 40%;
	}

	.container {
		margin: 0 1rem 1rem 1rem;
		background: #fff;
		padding: 50upx;
		border-radius: 12px;
	}

	.btn {
		/* width: upx; */
		height: 80upx;
		border-radius: 40upx;
		background-color: #f42450;
		line-height: 80upx;
		text-align: center;
		font-size: 30upx;
		color: #fff;
		border: 0;
		margin-top: 40upx;
	}

	.login-code {
		position: absolute;
		right: -218rpx;
		width: 50%;
		height: 70rpx;
	}

	.login-code-img {
		width: 100%;
		height: 38px;
		cursor: pointer;
		vertical-align: middle;
	}

	::v-deep .u-form-item__body__right__content__slot {
		flex-direction: row !important;
	}

	.switch-div {
		margin-top: 50upx;
		width: 100%;
		text-align: center;
	}

	.switch-text {
		font-size: 28upx;
		/* color: #3F9EFF; */
		color: #f42450;
		padding: 0 20upx;
	}

	/*
.tip {
	font-size: 24upx;
	text-align: center;
	margin-top: 40upx;
}

.tip span {
	color: #FF4445;
} */
	::v-deep .u-input__content.data-v-113bc24f {
		height: 50rpx;
		width: 100%;
	}
</style>